@import "unread-divider";
@import "date-divider";

$chat-min-width: 300px;
$chat-footer-height: 100px;

.chat {
  display: flex;
  flex-direction: column;

  min-width: $chat-min-width;

  flex: 1 1 auto;
  justify-content: flex-end;
  &__container {
    display: flex;
    position: relative;
  }

  &__scroll-to-bottom {
    position: absolute;;
    right: 32px;
    bottom: 0;
    border-radius: $default-border-radius;
    border: 1px solid $dark-sky-blue2;
    background-color: rgba(white, .7);
    color: $dark-sky-blue2;
    padding: 4px;
    cursor: pointer;
    transition: 200ms;
    &:hover {
      color: white;
      background-color: $dark-sky-blue2;
    }
  }
}

.chat__messages {
  position: relative;
  .message {
    min-height: min-content;
  }
}

.chat__footer {
  flex: 0 0 auto;

  &--disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    height: 90px;
    color: #ccc;
  }

  // &--clickable {
  //   cursor: pointer;
  //   color: $dark-sky-blue;
  //   :hover {
  //     color: darken($dark-sky-blue, 10%);
  //   }
  // }
}
